<template>
  <div>
    <!-- 警告文案 -->
    <el-alert
      title="注意：只允许为第三级分类设置相关参数！"
      type="warning"
    ></el-alert>
    <br />
    <!-- 联级选择器 -->
    <span class="demonstration">选择商品分类: </span>
    <el-cascader
      @change="getList()"
      v-model="pid"
      :options="Categories"
      :props="{ expandTrigger: 'hover', value: 'cat_id', label: 'cat_name' }"
    ></el-cascader>
    <!-- 标签页 -->
    <el-tabs v-model="activeName" @tab-click="getList()">
      <el-tab-pane
        v-for="(item, key) in tabs"
        :key="key"
        :label="item.title + item.title1"
        :name="key"
        @click="activeName = key"
      >
      </el-tab-pane>
    </el-tabs>
    <!-- 添加 -->
    <el-button
      type="primary"
      :disabled="!catId"
      @click="
        model = {};
        dialogFormVisible = true;
      "
      >添加{{ activeTab.title }}</el-button
    >
    <!-- 表格 -->
    <Table rowKey="attr_id" :column="col" :lists="list">
      <template v-slot:expands="{ row }">
        <el-tag
          :key="index"
          v-for="(tag, index) in row.tags"
          closable
          @close="delTag(row, index)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          :ref="input + row.attr_id"
          @blur="getupDateAttrValue(row)"
          @keyup="getupDateAttrValue(row)"
          v-if="row.visible"
          v-model="row.value"
          size="mini"
          class="input"
        >
        </el-input>
        <el-button
          class="button-new-tag"
          v-if="!row.visible"
          size="small"
          @click="show(row)"
          >+ New Tag</el-button
        >
      </template>
      <template v-slot:action="{ row }">
        <el-button
          size="small"
          @click="
            model = { ...row };
            dialogFormVisible = true;
          "
          >编辑</el-button
        >
        <el-button size="small" type="danger">删除</el-button>
      </template>
    </Table>

    <!-- 弹出框 -->
    <el-dialog
      v-model="dialogFormVisible"
      :title="title + activeTab.title1 + activeTab.title"
      :close-on-click-modal="false"
    >
      <el-form :model="model" label-width="120px" status-icon>
        <el-form-item
          :label="activeTab.title1 + activeTab.title"
          prop="attr_name"
        >
          <el-input v-model="model.attr_name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="getAddCategories">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, computed, ref } from "vue";
import api from "@/http/goods";
export default {
  name: "params",
  setup() {
    const input = ref();
    const state = reactive({
      dialogFormVisible: false,

      list: [],

      model: {},
      /**
       * 分类Id
       */
      paramsId: [],
      // 动态标题
      tabs: {
        many: {
          title: "参数",
          title1: "动态",
        },
        only: {
          title: "属性",
          title1: "静态",
        },
      },
      /**
       * 激活的名称
       */
      activeName: "many",
      /**
       * 分类列表
       */
      Categories: [],
    });
    /**
     * 显示输入
     */
    let show = (row) => {
      row.visible = true;
      this.$nextTick(() => {
        this.$refs["input" + row.attr_id].focus();
        console.log(this.$refs["input" + row.attr_id]);
      });
    };
    /**
     * 删除标签
     */
    let delTag = async (row, index) => {
      row.tags.splice(index, 1);
      row.attr_vals = row.tags.join(" ");
      const res = await api.UpdataAttribute(catId.value, row);
      if (res.meta.status == 200) {
        getList();
      }
    };
    /**
     * 添加标签
     */
    let getupDateAttrValue = async (row) => {
      if (!row.value) {
        return (row.visible = false);
      }

      row.attr_vals = row.tags.join(" ") + " " + row.value;
      const res = await api.UpdataAttribute(catId.value, row);
      if (res.meta.status == 200) {
        row.value = "";
        row.visible = false;
        getList();
      }
    };
    /**
     * 添加
     */
    let getAddCategories = async () => {
      const res = await (state.model.attr_id
        ? api.UpdataAttribute
        : api.AddAttribute)(catId.value, {
        ...state.model,
        attr_sel: state.activeName,
      });
      if (res.meta.status == 200 || res.meta.status == 201) {
        state.dialogFormVisible = false;
        getList();
      }
    };

    let getList = async () => {
      if (!catId) {
        return state.list.splice(0, Infinity);
      }
      console.log(state.paramsId, "paramsId");
      console.log(catId.value, "catid");
      console.log(state.activeName, " state.activeName");
      const res = await api.AttributeList(catId.value, state.activeName);
      res.data.forEach((item) => {
        item.tags = item.attr_vals.split(" ").filter((c) => c);
        console.log(item.tags);
        item.value = "";
        item.visible = false;
      });
      console.log(res, "参数");
      if (res.meta.status == 200) {
        state.list = res.data;
      }
    };
    /**
     * 获取分类数据
     */
    let getCategories = async () => {
      const res = await api.CategoriesList();
      console.log(res);
      if (res.meta.status == 200) {
        state.Categories = res.data;
      }
    };

    onMounted(() => {
      getCategories();
    });

    let activeTab = computed(() => {
      return state.tabs[state.activeName];
    });

    let catId = computed(() => {
      return state.paramsId.length < 3
        ? undefined
        : state.paramsId.slice(-1)[0];
    });

    let pid = computed({
      set(value) {
        state.paramsId = value.length < 3 ? [] : value;
        console.log(value, "value1");
      },
      get() {
        return state.paramsId;
      },
    });
    let title = computed(() => {
      return state.model.attr_id ? "编辑" : "添加";
    });
    let col = computed(() => {
      return [
        {
          type: "expand",
          width: "100px",
          align: "center",
          slot: "expands",
        },
        {
          label: "#",
          type: "index",
          width: "100px",
        },
        {
          label: state.tabs[state.activeName].title + "名称",
          prop: "attr_name",
        },
        {
          label: "操作",
          slot: "action",
          width: "400px",
          align: "center",
        },
      ];
    });
    return {
      ...toRefs(state), //导出数据
      activeTab,
      title,
      catId,
      pid,
      col, //列
      getCategories, //获取分类数据
      getList,
      getAddCategories,
      getupDateAttrValue,
      show,
      input,
      delTag,
    };
  },
};
</script>

<style lang="scss" scoped>
.input {
  width: 100px;
}
</style>